.pub_index {
    background-color: #F8F8F8;

    .bg_img {
        width: 100vw;
        height: 67vw;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
    }

    .page_box {
        ::v-deep .screen_box {
            width: 100vw;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.4);
            padding: 0 0 0 120rpx;
            box-sizing: border-box;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 100;
            overflow: hidden;
        }

        ::v-deep .screen_div {
            width: 100%;
            height: 100%;
            background-color: #fff;
            position: relative;
            left: 0;

            .title {
                line-height: 88rpx;
                text-align: center;
                color: #000000;
                font-size: 32rpx;
                font-weight: bold;
                position: relative;

                .left_icon {
                    width: 16rpx;
                    height: 36rpx;
                    position: absolute;
                    left: 32rpx;
                    top: 26rpx;
                }
            }

            .search {
                width: calc(100% - 28rpx);
                height: 80rpx;
                margin: 16rpx auto 0 auto;
                border: 2rpx solid #EEEEEE;
                border-radius: 40rpx;
                padding: 18rpx 40rpx;
                box-sizing: border-box;
                display: flex;

                .icon {
                    width: 36rpx;
                    height: 40rpx;
                    margin: 0 16rpx 0 0;
                }

                .inp {
                    flex: 1;
                    height: 40rpx;
                    line-height: 40rpx;
                    font-size: 28rpx;
                    color: #333;
                }
            }

            .lis {
                width: calc(100% - 56rpx);
                margin: 0 auto;

                .p {
                    color: #333333;
                    font-size: 30rpx;
                    line-height: 42rpx;
                    margin: 24rpx 0;
                }

                .li {
                    display: flex;
                    flex-wrap: wrap;

                    .span {
                        background-color: rgba(0, 0, 0, 0.06);
                        border-radius: 4rpx;
                        line-height: 56rpx;
                        padding: 0 16rpx;
                        color: #999;
                        font-size: 28rpx;
                        margin: 0 16rpx 16rpx 0;
                    }

                    .span_active {
                        color: #3296FA;
                        background-color: rgba(50, 150, 250, 0.08);
                    }
                }
            }

            .btns {
                position: absolute;
                width: 100%;
                bottom: 32rpx;
                right: 0;
                padding: 0 12rpx;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;

                div {
                    width: 48%;
                    margin: 0;
                }
            }
        }

        ::v-deep .screen_div_animation {
            animation: screen_div_animation 0.6s;
        }

        @keyframes screen_div_animation {
            from {
                left: 100vw;
            }

            to {
                left: 0;
            }
        }

    }
}

.index_manage {
    padding: 0 24rpx;

    .region_div {
        display: flex;
        justify-content: space-between;
        padding: 44rpx 0 32rpx 0;

        .left {
            .icon_1 {
                width: 32rpx;
                height: 48rpx;
                display: inline-block;
                vertical-align: top;
            }

            .txt {
                font-size: 30rpx;
                color: #FFFFFF;
                line-height: 48rpx;
                display: inline-block;
                vertical-align: top;
                margin: 0 8rpx 0 20rpx;
            }

            .icon_2 {
                width: 24rpx;
                height: 48rpx;
                display: inline-block;
                vertical-align: top;
            }
        }

        .right {
            width: 44rpx;
            height: 48rpx;
        }
    }

    .nums_div {
        width: 100%;
        box-shadow: 0 0 14rpx 0 rgba(197, 197, 197, 0.40);
        background-color: #fff;
        border-radius: 20rpx;
        display: flex;
        flex-wrap: wrap;
        padding: 40rpx 24rpx;
        box-sizing: border-box;

        .title {
            width: 100%;
            display: flex;
            justify-content: space-between;

            .p_1 {
                font-size: 30rpx;
                color: #333333;
                line-height: 40rpx;
            }

            .p_2 {
                font-size: 30rpx;
                color: #3296FA;
                line-height: 40rpx;

                .icon {
                    width: 28rpx;
                    height: 40rpx;
                    display: inline-block;
                    vertical-align: top;
                    margin: 0 6rpx 0 0;
                }
            }
        }

        .li {
            width: calc(100% / 3);
            margin: 48rpx 0 0 0;

            .p_1 {
                font-size: 40rpx;
                color: #333333;
                line-height: 40rpx;
            }

            .p_2 {
                font-size: 26rpx;
                color: #999999;
                line-height: 36rpx;
                margin-top: 24rpx;
            }
        }
    }

    .tabs_div {
        padding: 32rpx 0 32rpx 0;
        display: flex;
        justify-content: space-between;

        .li {
            height: 48rpx;
            box-sizing: border-box;
            padding: 0 28rpx;
            border-radius: 24rpx;
            border: 2rpx solid rgba(50, 150, 250, 0.5);
            background-color: #fff;

            .icon {
                width: 20rpx;
                height: 44rpx;
                display: inline-block;
                vertical-align: top;
                margin: 0 0 0 10rpx;
            }

            .txt {
                display: inline-block;
                vertical-align: top;
                line-height: 44rpx;
                font-size: 24rpx;
                color: #3296FA;
            }
        }

        .right_icon {
            width: 44rpx;
            height: 48rpx;
        }
    }

    .lis_div {
        .li {
            width: 100%;
            box-shadow: 0 0 14rpx 0 rgba(197, 197, 197, 0.40);
            background-color: #fff;
            border-radius: 20rpx;
            display: flex;
            flex-wrap: wrap;
            padding: 40rpx 24rpx;
            box-sizing: border-box;
            margin-bottom: 32rpx;

            .p_1 {
                width: 70%;
                line-height: 40rpx;
                color: #333333;
                font-size: 28rpx;
            }

            .p_2 {
                width: 30%;
                line-height: 40rpx;
                color: #3296FA;
                font-size: 24rpx;
                position: relative;
                padding: 0 0 0 20rpx;
                box-sizing: border-box;
                text-align: right;

                .yuan {
                    width: 12rpx;
                    height: 12rpx;
                    border-radius: 50%;
                    background-color: #3296FA;
                    display: inline-block;
                    vertical-align: top;
                    margin: 14rpx 8rpx 0 0;
                }

                .yuan_red {
                    background-color: #F12F1A;
                }

                .txt {
                    color: #3296FA;
                    display: inline-block;
                    vertical-align: top;
                }

                .txt_red {
                    color: #F12F1A;
                }
            }

            .p_3 {
                width: 70%;
                line-height: 34rpx;
                color: #333333;
                font-size: 24rpx;
                margin-top: 32rpx;

                .icon {
                    width: 28rpx;
                    height: 34rpx;
                    display: inline-block;
                    vertical-align: top;
                    margin: 0 10rpx 0 0;
                }
            }

            .p_4 {
                width: 30%;
                margin-top: 32rpx;

                .p_4_1 {
                    line-height: 34rpx;
                    color: #333;
                    font-size: 24rpx;
                    text-align: right;
                }
            }

            .p_5 {
                width: 100%;
                line-height: 34rpx;
                color: #666666;
                font-size: 24rpx;
                margin-top: 16rpx;
            }

            .p_5_1 {
                width: 50%;
            }
        }
    }


}

.index_user {
    padding: 0 24rpx;

    .region_div {
        display: flex;
        justify-content: space-between;
        padding: 44rpx 0 32rpx 0;

        .left {
            .icon_1 {
                width: 32rpx;
                height: 48rpx;
                display: inline-block;
                vertical-align: top;
            }

            .txt {
                font-size: 30rpx;
                color: #FFFFFF;
                line-height: 48rpx;
                display: inline-block;
                vertical-align: top;
                margin: 0 8rpx 0 20rpx;
            }

            .icon_2 {
                width: 24rpx;
                height: 48rpx;
                display: inline-block;
                vertical-align: top;
            }
        }

        .right {
            width: 44rpx;
            height: 48rpx;
        }
    }

    .swiper_div {
        width: 100%;

        .swiper_box {
            height: 620rpx;
            box-shadow: 0 0 14rpx 0 rgba(197, 197, 197, 0.40);
            background-color: #fff;
            border-radius: 20rpx;

            .swiper_item {
                height: 620rpx;
                position: relative;
                overflow: hidden;
                border-radius: 20rpx;

                .time {
                    background-color: rgba(50, 150, 250, 0.08);
                    height: 40rpx;
                    line-height: 40rpx;
                    font-size: 20rpx;
                    color: #3296FA;
                    text-align: center;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                }

                .lis {
                    padding: 40rpx 24rpx 48rpx 24rpx;
                    box-sizing: border-box;
                    display: flex;
                    flex-wrap: wrap;

                    .li {
                        width: 100%;
                        display: flex;
                        flex-wrap: wrap;
                        margin: 0 0 48rpx 0;

                        .p_1 {
                            width: 70%;
                            line-height: 40rpx;
                            color: #666666;
                            font-size: 28rpx;

                            .icon_1 {
                                width: 40rpx;
                                height: 40rpx;
                                display: inline-block;
                                vertical-align: top;
                                margin: 0 16rpx 0 0;
                            }
                        }

                        .p_2 {
                            width: 30%;
                            line-height: 40rpx;
                            color: #3296FA;
                            font-size: 24rpx;
                            text-align: right;

                            .yuan {
                                width: 12rpx;
                                height: 12rpx;
                                border-radius: 50%;
                                background-color: #3296FA;
                                display: inline-block;
                                vertical-align: top;
                                margin: 14rpx 8rpx 0 0;
                            }

                            .yuan_red {
                                background-color: #F12F1A;
                            }

                            .txt {
                                color: #3296FA;
                                display: inline-block;
                                vertical-align: top;
                            }

                            .txt_red {
                                color: #F12F1A;
                            }
                        }

                        .p_3 {
                            line-height: 48rpx;
                            color: #3296FA;
                            font-size: 48rpx;
                            // font-weight: bold;
                            width: 100%;
                        }

                        .p_4 {
                            line-height: 36rpx;
                            color: #999999;
                            font-size: 26rpx;
                            width: 100%;
                            margin-top: 24rpx;
                        }

                        .p_5 {
                            line-height: 40rpx;
                            color: #333333;
                            font-size: 40rpx;
                            width: 100%;

                            .icon_2 {
                                width: 32rpx;
                                height: 40rpx;
                                display: inline-block;
                                vertical-align: top;
                                margin: 0 0 0 8rpx;
                            }
                        }
                    }

                    .li_1 {
                        width: calc(100% / 3);
                    }

                    .li:last-child {
                        margin: 0 0 0 0;
                    }
                }
            }
        }

        .swiper_indicator {
            display: flex;
            justify-content: center;
            padding: 24rpx 0 32rpx 0;
            box-sizing: border-box;

            .li {
                width: 10rpx;
                height: 10rpx;
                border-radius: 5rpx;
                background-color: rgba(50, 150, 250, 0.2);
                margin: 0 10rpx;
            }

            .li_active {
                width: 26rpx;
                border-radius: 5rpx;
                background-color: #3296FA;
            }
        }
    }

    .tools_div {
        display: flex;

        .li {
            width: calc((100% - 60rpx) / 4);
            box-shadow: 0 0 14rpx 0 rgba(197, 197, 197, 0.40);
            background-color: #fff;
            border-radius: 20rpx;
            padding: 30rpx 0 16rpx 0;
            margin: 0 20rpx 0 0;

            .img {
                width: 60rpx;
                height: 60rpx;
                display: block;
                margin: 0 auto;
            }

            .p {
                line-height: 34rpx;
                color: #666666;
                font-size: 24rpx;
                text-align: center;
                margin-top: 20rpx;
            }
        }

        .li:last-child {
            margin: 0;
        }
    }

    .data_div {
        width: 100%;
        box-shadow: 0 0 14rpx 0 rgba(197, 197, 197, 0.40);
        background-color: #fff;
        border-radius: 20rpx;
        padding: 40rpx 24rpx 48rpx 24rpx;
        box-sizing: border-box;
        margin: 32rpx 0;
        display: flex;
        flex-wrap: wrap;

        .li {
            width: 100%;
            margin-top: 48rpx;
            display: flex;
            flex-wrap: wrap;

            .p_1 {
                color: #333333;
                line-height: 42rpx;
                font-size: 30rpx;
                width: 100%;
            }

            .p_2 {
                line-height: 48rpx;
                color: #3296FA;
                font-size: 48rpx;
                // font-weight: bold;
                width: 100%;
            }

            .p_3 {
                line-height: 36rpx;
                color: #999999;
                font-size: 26rpx;
                width: 100%;
                margin-top: 24rpx;
            }

            .p_4 {
                line-height: 40rpx;
                color: #333333;
                font-size: 40rpx;
                width: 100%;
            }
        }

        .li:first-child {
            margin-top: 0;
        }

        .li:nth-child(2) {
            margin-top: 34rpx;
        }

        .li_1 {
            width: calc(100% / 3);
        }
    }

    .echart_div {
        width: 100%;
        box-shadow: 0 0 14rpx 0 rgba(197, 197, 197, 0.40);
        background-color: #fff;
        border-radius: 20rpx;
        padding: 30rpx;
        box-sizing: border-box;
        margin: 32rpx 0;

        .title {
            color: rgba(0, 0, 0, 0.85);
            line-height: 36rpx;
            font-size: 26rpx;
            position: relative;
            width: 100%;
            margin-bottom: 20rpx;

            .month {
                color: #333333;
                line-height: 36rpx;
                font-size: 28rpx;
                position: absolute;
                right: 0;
                top: 0;

                .icon {
                    width: 20rpx;
                    height: 36rpx;
                    display: inline-block;
                    vertical-align: top;
                    margin: 0 0 0 8rpx;
                }
            }

            // .date {
            //     width: 150rpx;
            //     color: #3296FA;
            //     height: 48rpx;
            //     line-height: 44rpx;
            //     font-size: 28rpx;
            //     border: 2rpx solid #3296FA;
            //     border-radius: 24rpx;
            //     text-align: center;

            //     .img {
            //         width: 20rpx;
            //         height: 44rpx;
            //         display: inline-block;
            //         vertical-align: top;
            //         margin: 0 0 0 18rpx;
            //     }
            // }
        }

        .echart_div_box {
            width: 100%;
            // background-color: #fff;
            height: 400rpx;
            margin-top: 20rpx;
        }
    }

    .pay_box {
        width: 100vw;
        height: 100vh;
        position: fixed;
        bottom: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.4);

        .pay_div {
            width: 100vw;
            height: auto;
            background-color: #fff;
            padding: 0 24rpx 80rpx 24rpx;
            box-sizing: border-box;
            position: absolute;
            bottom: 0;
            left: 0;

            .title {
                line-height: 88rpx;
                text-align: center;
                font-size: 32rpx;
                color: #000000;
                font-weight: bold;
                position: relative;

                .right {
                    width: 28rpx;
                    height: 28rpx;
                    position: absolute;
                    right: 22rpx;
                    top: 30rpx;
                }
            }

            .plis {
                display: flex;
                flex-wrap: wrap;
                margin-top: 12rpx;

                .li {
                    width: calc((100% - 40rpx) / 3);
                    height: 100rpx;
                    line-height: 100rpx;
                    text-align: center;
                    font-size: 32rpx;
                    color: #000000;
                    background-color: #F8F8F8;
                    border-radius: 16rpx;
                    margin: 0 20rpx 20rpx 0;

                    .input {
                        line-height: 100rpx;
                        height: 100rpx;
                        font-size: 32rpx;
                        color: #000000;
                        width: 50%;
                        display: inline-block;
                        vertical-align: top;
                        margin: 0 10rpx 0 0;
                    }
                }

                .li:nth-child(3n) {
                    margin: 0 0 20rpx 0;
                }

                .li_active {
                    background-color: #3296FA;
                    color: #fff;
                }
            }

            .wlis {
                padding: 12rpx 0 0 0;

                .p {
                    line-height: 42rpx;
                    color: #333333;
                    font-size: 30rpx;
                }

                .li {
                    line-height: 48rpx;
                    color: #333333;
                    font-size: 28rpx;
                    margin-top: 32rpx;

                    .icon {
                        width: 48rpx;
                        height: 48rpx;
                        display: inline-block;
                        vertical-align: top;
                        margin: 0 16rpx 0 0;
                    }

                    .right {
                        width: 32rpx;
                        height: 48rpx;
                        float: right;
                    }
                }
            }

            .pub_btn {
                margin: 48rpx 0;
                width: 100%;
            }

            .msg {
                line-height: 36rpx;
                color: #666666;
                font-size: 26rpx;
            }
        }
    }

}

.pub_ammeter_info {
    background-color: #F8F8F8;
    height: 100vh;

    .bg_img {
        width: 100vw;
        height: 67vw;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
    }

    .page_box {

        .region_div {
            width: calc(100% - 48rpx);
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            padding: 44rpx 0 32rpx 0;

            .left {
                .icon_1 {
                    width: 32rpx;
                    height: 48rpx;
                    display: inline-block;
                    vertical-align: top;
                }

                .txt {
                    font-size: 30rpx;
                    color: #FFFFFF;
                    line-height: 48rpx;
                    display: inline-block;
                    vertical-align: top;
                    margin: 0 8rpx 0 20rpx;
                }
            }
        }

        .info_div {
            width: calc(100% - 48rpx);
            margin: 0 auto;
            box-shadow: 0 0 14rpx 0 rgba(197, 197, 197, 0.40);
            background-color: #fff;
            border-radius: 20rpx;
            overflow: hidden;

            .time {
                background-color: rgba(50, 150, 250, 0.08);
                height: 40rpx;
                line-height: 40rpx;
                font-size: 20rpx;
                color: #3296FA;
                text-align: center;
                width: 100%;
            }

            .lis {
                padding: 40rpx 24rpx 48rpx 24rpx;
                box-sizing: border-box;
                display: flex;
                flex-wrap: wrap;

                .li {
                    width: 100%;
                    display: flex;
                    flex-wrap: wrap;
                    margin: 0 0 48rpx 0;

                    .p_1 {
                        width: 70%;
                        line-height: 40rpx;
                        color: #666666;
                        font-size: 28rpx;

                        .icon_1 {
                            width: 40rpx;
                            height: 40rpx;
                            display: inline-block;
                            vertical-align: top;
                            margin: 0 16rpx 0 0;
                        }
                    }

                    .p_2 {
                        width: 30%;
                        line-height: 40rpx;
                        color: #3296FA;
                        font-size: 24rpx;
                        text-align: right;

                        .yuan {
                            width: 12rpx;
                            height: 12rpx;
                            border-radius: 50%;
                            background-color: #3296FA;
                            display: inline-block;
                            vertical-align: top;
                            margin: 14rpx 8rpx 0 0;
                        }

                        .yuan_red {
                            background-color: #F12F1A;
                        }

                        .txt {
                            color: #3296FA;
                            display: inline-block;
                            vertical-align: top;
                        }

                        .txt_red {
                            color: #F12F1A;
                        }
                    }

                    .p_3 {
                        line-height: 48rpx;
                        color: #3296FA;
                        font-size: 48rpx;
                        // font-weight: bold;
                        width: 100%;
                    }

                    .p_4 {
                        line-height: 36rpx;
                        color: #999999;
                        font-size: 26rpx;
                        width: 100%;
                        margin-top: 24rpx;
                    }

                    .p_5 {
                        line-height: 40rpx;
                        color: #333333;
                        font-size: 40rpx;
                        width: 100%;

                        .icon_2 {
                            width: 32rpx;
                            height: 40rpx;
                            display: inline-block;
                            vertical-align: top;
                            margin: 0 0 0 8rpx;
                        }
                    }
                }

                .li_1 {
                    width: calc(100% / 3);
                }

                .li_2 {
                    width: calc(100% / 3 * 2);
                }

                .li_no_margin {
                    margin: 0;
                }
            }

        }

        .tools_div {

            .swiper_box {
                height: 216rpx;

                .swiper_item {
                    height: 216rpx;
                    display: flex;
                    padding: 32rpx 24rpx 24rpx 24rpx;
                    box-sizing: border-box;
                    // justify-content: space-between;

                    .li {
                        width: calc((100% - 60rpx) / 4);
                        box-shadow: 0 0 14rpx 0 rgba(197, 197, 197, 0.40);
                        background-color: #fff;
                        border-radius: 20rpx;
                        padding: 30rpx 0 16rpx 0;
                        box-sizing: border-box;
                        margin: 0 20rpx 0 0;

                        .img {
                            width: 60rpx;
                            height: 60rpx;
                            display: block;
                            margin: 0 auto;
                        }

                        .p {
                            line-height: 34rpx;
                            color: #666666;
                            font-size: 24rpx;
                            text-align: center;
                            margin-top: 20rpx;
                        }
                    }

                    .li:last-child {
                        margin: 0;
                    }
                }

            }

            .swiper_indicator {
                display: flex;
                width: 104rpx;
                margin: 0 auto 32rpx auto;
                height: 10rpx;
                border-radius: 5rpx;
                background-color: rgba(50, 150, 250, 0.08);

                .li {
                    width: 52rpx;
                    height: 10rpx;
                }

                .li_active {
                    width: 52rpx;
                    border-radius: 5rpx;
                    background-color: #3296FA;
                }
            }
        }

        .data_div {
            width: calc(100% - 48rpx);
            margin: 32rpx auto;
            box-shadow: 0 0 14rpx 0 rgba(197, 197, 197, 0.40);
            background-color: #fff;
            border-radius: 20rpx;
            padding: 40rpx 24rpx 48rpx 24rpx;
            box-sizing: border-box;
            display: flex;
            flex-wrap: wrap;

            .li {
                width: 100%;
                margin-top: 48rpx;
                display: flex;
                flex-wrap: wrap;

                .p_1 {
                    color: #333333;
                    line-height: 42rpx;
                    font-size: 30rpx;
                    width: 100%;
                }

                .month {
                    width: calc(100% - 160rpx);
                    color: #333333;
                    line-height: 48rpx;
                    font-size: 28rpx;

                    .img {
                        width: 20rpx;
                        height: 48rpx;
                        display: inline-block;
                        vertical-align: top;
                        margin: 0 0 0 8rpx;
                    }
                }

                .date {
                    width: 150rpx;
                    color: #3296FA;
                    height: 48rpx;
                    line-height: 44rpx;
                    font-size: 28rpx;
                    border: 2rpx solid #3296FA;
                    border-radius: 24rpx;
                    text-align: center;

                    .img {
                        width: 20rpx;
                        height: 44rpx;
                        display: inline-block;
                        vertical-align: top;
                        margin: 0 0 0 18rpx;
                    }
                }

                .p_2 {
                    line-height: 48rpx;
                    color: #3296FA;
                    font-size: 48rpx;
                    // font-weight: bold;
                    width: 100%;
                }

                .p_3 {
                    line-height: 36rpx;
                    color: #999999;
                    font-size: 26rpx;
                    width: 100%;
                    margin-top: 24rpx;
                }

                .p_4 {
                    line-height: 40rpx;
                    color: #333333;
                    font-size: 40rpx;
                    width: 100%;
                }
            }

            .li:first-child {
                margin-top: 0;
            }

            .li:nth-child(2) {
                margin-top: 34rpx;
            }

            .li_1 {
                width: calc(100% / 3);
            }
        }

        .echart_div {
            width: calc(100% - 48rpx);
            margin: 32rpx auto;
            box-shadow: 0 0 14rpx 0 rgba(197, 197, 197, 0.40);
            background-color: #fff;
            border-radius: 20rpx;
            padding: 30rpx;
            box-sizing: border-box;

            .title {
                color: rgba(0, 0, 0, 0.85);
                line-height: 36rpx;
                font-size: 26rpx;
                position: relative;
                width: 100%;
                margin-bottom: 20rpx;

                .month {
                    color: #333333;
                    line-height: 36rpx;
                    font-size: 28rpx;
                    position: absolute;
                    right: 0;
                    top: 0;

                    .icon {
                        width: 20rpx;
                        height: 36rpx;
                        display: inline-block;
                        vertical-align: top;
                        margin: 0 0 0 8rpx;
                    }
                }
            }

            .echart_div_box {
                width: 100%;
                // background-color: #fff;
                height: 400rpx;
            }
        }
    }

    .model_box {
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.4);
        z-index: 100;
        display: flex;
        flex-wrap: wrap;
        align-content: center;

        .model_div {
            width: 90vw;
            background-color: #fff;
            border-radius: 20rpx;
            margin: 0 5vw;
            padding: 0 30rpx 60rpx 30rpx;

            .titles {
                line-height: 120rpx;
                color: #333;
                font-size: 32rpx;
                position: relative;
                text-align: center;

                .close {
                    width: 30rpx;
                    height: 30rpx;
                    position: absolute;
                    right: 30rpx;
                    top: 50%;
                    margin-top: -15rpx;
                }
            }

            .pub_input {
                margin: 32rpx auto 80rpx auto;
                padding: 0 24rpx 0 24rpx;
                box-shadow: 0 0 14rpx 0 rgba(197, 197, 197, 0.51);

                .li {
                    padding: 32rpx 0 32rpx 0;
                }
            }
        }
    }
}

.pub_add_device {
    background-color: #FAFAFA;

    .page_box {
        .step_div {
            background-color: #3296FA;
            padding: 48rpx 0;
            box-sizing: border-box;
            display: flex;
            justify-content: center;

            .li {
                width: 200rpx;
                opacity: 0.5;

                .num {
                    width: 40rpx;
                    height: 40rpx;
                    color: #3296FA;
                    font-size: 24rpx;
                    background-color: #FFFFFF;
                    line-height: 40rpx;
                    text-align: center;
                    border-radius: 50%;
                    margin: 0 auto 16rpx auto;
                }

                .p {
                    line-height: 34rpx;
                    text-align: center;
                    color: #FFFFFF;
                    font-size: 24rpx;
                }
            }

            .li_active {
                opacity: 1;
            }

            .line {
                height: 21rpx;
                width: 104rpx;
                border-bottom: 2rpx dashed #FFFFFF;
                box-sizing: border-box;
                margin: 0 40rpx;
            }
        }

        .lis_box {
            .title {
                padding: 32rpx 24rpx;
                box-sizing: border-box;
                font-size: 30rpx;
                line-height: 42rpx;
                color: #333333;

                .xing {
                    color: #F12F1A;
                }

                .right_icon {
                    width: 14rpx;
                    height: 42rpx;
                    float: right;
                }
            }

            .lis_div {

                .lis {
                    width: calc(100% - 48rpx);
                    box-shadow: 0 0 14rpx 0 rgba(197, 197, 197, 0.21);
                    background-color: #fff;
                    border-radius: 20rpx;
                    padding: 40rpx 24rpx 40rpx 24rpx;
                    box-sizing: border-box;
                    margin: 0 auto 32rpx auto;
                    position: relative;

                    .remark {
                        height: 48rpx;
                        line-height: 48rpx;
                        font-size: 30rpx;
                        color: #333333;

                        .icon {
                            width: 48rpx;
                            height: 48rpx;
                            border-radius: 50%;
                            margin: 0 16rpx 0 0;
                            display: inline-block;
                            vertical-align: top;
                        }

                        .right {
                            font-size: 24rpx;
                            color: #3296FA;
                            line-height: 48rpx;
                            float: right;

                            .yuan {
                                width: 12rpx;
                                height: 12rpx;
                                background-color: #3296FA;
                                display: inline-block;
                                vertical-align: top;
                                margin: 18rpx 8rpx 0 0;
                                border-radius: 50%;
                            }
                        }

                        .right_1 {
                            color: #F12F1A;

                            .yuan {
                                background-color: #F12F1A;
                            }
                        }
                    }

                    .li {
                        margin-top: 32rpx;
                        display: flex;
                        padding: 0 60rpx 0 0;
                        box-sizing: border-box;

                        .p_1 {
                            width: 180rpx;
                            line-height: 40rpx;
                            font-size: 28rpx;
                            color: #999999;
                        }

                        .p_2 {
                            width: calc(100% - 180rpx);
                            line-height: 40rpx;
                            font-size: 28rpx;
                            color: #333333;
                        }
                    }

                    .edit {
                        width: 36rpx;
                        height: 36rpx;
                        position: absolute;
                        right: 24rpx;
                        top: 50%;
                        margin-top: -18rpx;

                        .icon {
                            width: 36rpx;
                            height: 36rpx;
                        }
                    }
                }
            }
        }

        .btns_div {
            display: flex;
            justify-content: space-between;
            padding: 0 24rpx;
            box-sizing: border-box;

            .btn_1 {
                border: 2rpx solid #3296FA;
                line-height: 86rpx;
                background-color: #fff;
                width: 40%;
                text-align: center;
                border-radius: 45rpx;
                color: #3296FA;
                font-size: 30rpx;
                box-sizing: border-box;
            }

            .btn_right {
                width: 55%;
                background-color: #fff;
                display: flex;
                border-radius: 45rpx;
                overflow: hidden;

                .btn_2 {
                    line-height: 86rpx;
                    width: 60%;
                    text-align: center;
                    color: #3296FA;
                    font-size: 30rpx;
                    border-top-left-radius: 45rpx;
                    border-bottom-left-radius: 45rpx;
                    border: 2rpx solid #3296FA;
                    position: relative;
                }

                .btn_2::before {
                    width: 130rpx;
                    height: 130rpx;
                    background-color: #3296FA;
                    position: absolute;
                    content: "";
                    right: -95rpx;
                    top: 16rpx;
                    transform: rotate(29deg);
                }

                .btn_3 {
                    line-height: 90rpx;
                    width: 40%;
                    background-color: #3296FA;
                    text-align: center;
                    color: #fff;
                    font-size: 30rpx;
                    border-top-right-radius: 45rpx;
                    border-bottom-right-radius: 45rpx;
                    position: relative;
                    z-index: 1;
                }

                .btn_4 {
                    line-height: 90rpx;
                    width: 100%;
                    background-color: #3296FA;
                    text-align: center;
                    color: #fff;
                    font-size: 30rpx;
                    border-top-right-radius: 45rpx;
                    border-bottom-right-radius: 45rpx;
                    position: relative;
                    z-index: 1;
                }
            }
        }
    }
}